<template>
    <div  class="header">
        <!--展开和收缩的图标-->
        <div style="font-size: 20px">
            <i class="el-icon-s-fold" v-if="isShow" @click="changeIsShow"></i>
            <i class="el-icon-s-unfold" v-if="!isShow" @click="changeIsShow"></i>
        </div>
        <!--用户信息展示-->
        <div>
            <el-header style="text-align: right; font-size: 12px">
                <span>{{username}}</span>
                <el-dropdown>
                    <i class="el-icon-setting" style="margin-left: 15px"></i>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item @click.native="editUserInfo">个人中心</el-dropdown-item>
                        <el-dropdown-item @click.native="logout">安全退出</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </el-header>
        </div>

    </div>
</template>

<script>
    import {mapState,mapMutations} from "vuex";

    export default {
        name: "HeaderView",
        data() {
            return {
                isShow: true,
                userFormVisible:false,
                passwordFormVisible:false,
                userForm:{},
            }
        },
        created() {
          this.getusername()
        },
       computed:{
         ...mapState(['username'])
       },
      methods:{
           ...mapMutations(['getusername']),
            changeIsShow(){
                this.isShow  = !this.isShow
                // 调用 vuex中的mutations提供的修改 IsCollapse值的 changeIsCollapse 函数
                this.$store.commit('changeIsCollapse')
                // 改变navbar的宽度  changeCollapseClass
                this.$store.commit('changeCollapseClass')
            },
            editUserInfo(){  // 编辑个人信息
               this.$router.push("infor")
            },
            logout(){// 退出登录
                // 弹出确认提示
                this.$confirm('请确认是否退出登录?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$message({ type: 'success', message: '退出登录成功!'});
                    window.sessionStorage.clear()
                    this.$store.commit('getMenuList',[])
                    this.$router.push("/login")
                }).catch(() => {
                    this.$message({ type: 'info', message: '取消退出' });
                });
            },
        }
    }
</script>

<style scoped>
    .header {
        display: flex;
        justify-content: space-between;
        height: 60px;
        padding-left: 20px;
        padding-top: 10px;
        box-sizing: border-box;
        box-shadow: 0px 5px 5px #ddd;
    }
</style>
